<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
        }
        .game-box {
            border: 2px solid #ccc;
            padding: 20px;
            border-radius: 10px;
        }
        input[type="number"] {
            width: 120px;
            padding: 8px;
            margin: 10px 0;
        }
        button {
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            color: #d32f2f;
            min-height: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="game-box">
        <h2>猜数字游戏（1-100）</h2>
        <div>
            <input type="number" id="guessInput" placeholder="输入数字" min="1" max="100">
            <button onclick="checkGuess()">提交</button>
        </div>
        <div id="message"></div>
    </div>

    <script>
        // 生成随机目标数字
        let target = Math.floor(Math.random() * 100) + 1;
        
        function checkGuess() {
            const input = document.getElementById('guessInput');
            const message = document.getElementById('message');
            let guess = parseInt(input.value);

            // 输入验证
            if (isNaN(guess)) {
                message.textContent = "输入无效，请输入一个整数！";
                return;
            }
            if (guess < 1 || guess > 100) {
                message.textContent = "请输入1到100之间的整数！";
                return;
            }

            // 游戏逻辑
            if (guess < target) {
                message.textContent = "太小了！再试一次。";
            } else if (guess > target) {
                message.textContent = "太大了！再试一次。";
            } else {
                message.textContent = "🎉 恭喜你猜对了！";
                input.disabled = true;
            }
            
            input.value = ""; // 清空输入框
        }

        // 回车键支持
        document.getElementById('guessInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') checkGuess();
        });
    </script>
</body>
</html>